import { HashRouter, Route, Routes } from 'react-router-dom';
import App from './App';
import Home from './pages/00-home';
import AudioDemo from './pages/Audio/01-index';
import { RoutePaths } from './config';
import UserMedia from './pages/01-user-media';
import ContentShare from './pages/03-content-share';
import VideoFilter from './pages/04-video-filter';
import VolumeMeter from './pages/06-volume-meter';
import CanvasCaptureScreen from './pages/02-canvas-snap';
import ResolutionRatio from './pages/05-resolution-ratio';
import AudioVisualizer from './pages/06-volume-meter/AudioVisualizer';
import FetchAudio from './pages/Audio/02-fetchAudio';
import GainNodeDemo from './pages/Audio/03-gainNode';
import AudioRecorder from './pages/Audio/04-audioRecorder';
import AnalyserNodeDemo from './pages/Audio/05-analyserNode';

import YuanShenPinao from './pages/piano';

const MyRouters = () => {
    return (
        <HashRouter>
            <Routes>
                <Route path={RoutePaths.home} element={<App />}>
                    {/* 00-home 页面 */}
                    <Route path={RoutePaths.home} element={<Home />} />
                    {/* 01-打开摄像头和麦克风 */}
                    <Route path={RoutePaths.getUserMedia} element={<UserMedia />} />
                    {/* 02-用 canvas 截取视频某一帧 */}
                    <Route path={RoutePaths.canvasSnap} element={<CanvasCaptureScreen />} />
                    {/* 03-共享屏幕 */}
                    <Route path={RoutePaths.contentShare} element={<ContentShare />} />
                    {/* 04-视频滤镜 */}
                    <Route path={RoutePaths.videoFilter} element={<VideoFilter />} />
                    {/* 05-视频分辨率设置 & 动态切换 */}
                    <Route path={RoutePaths.resolutionRatio} element={<ResolutionRatio />} />
                    {/* 06-音量检测 */}
                    <Route path={RoutePaths.volumeMeter} element={<VolumeMeter />} />
                    {/* 06-audioVisualizer 音频可视化 */}
                    <Route path={RoutePaths.audioVisualizer} element={<AudioVisualizer />} />

                    {/* 音频 demo */}
                    <Route path={RoutePaths.audioDemo} element={<AudioDemo />} />
                    {/* 播放网络请求中的音频数据 */}
                    <Route path={RoutePaths.fetchAudio} element={<FetchAudio />} />
                    {/* 使用 GainNode 处理音频音量 */}
                    <Route path={RoutePaths.gainNode} element={<GainNodeDemo />} />
                    {/* 使用 MediaRecoder API 录制音频 */}
                    <Route path={RoutePaths.audioRecoder} element={<AudioRecorder />} />
                    {/* 使用 analyserNode 可实话音频数据 */}
                    <Route path={RoutePaths.analyserNode} element={<AnalyserNodeDemo />} />

                    {/* 原神弹奏 */}
                    <Route path={RoutePaths.yuanshen} element={<YuanShenPinao />} />

                    <Route path="*" element={<Home />} />
                </Route>
            </Routes>
        </HashRouter>
    );
};

export default MyRouters;
